<template>
  <div id="wrapper">
    <main>
      <el-container>
        <el-header style="height: 30px">
          <AppInfo/>
        </el-header>
      </el-container>
      <el-container>
        <el-aside>
          <el-card>
            <AsideComponent/>
          </el-card>
        </el-aside>
        <el-main>
          <el-card>
            <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入原文,为保证去重质量，长度控制在 6000 bytes以内，汉字约为2000个"
                v-model="before.q">
            </el-input>
            <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="去重后文本"
                v-model="result">
            </el-input>
            <div style="height: 80px">
              <el-select v-model="from" placeholder="请选择">
                <el-option
                    v-for="item in fromList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  <span style="float: left">{{ item.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
              </el-select>
              <el-button type="primary" @click="translate">去重</el-button>
            </div>
          </el-card>
        </el-main>
      </el-container>
      <el-footer>
        <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 3}"
            placeholder="日志信息"
            v-model="logMsg">
          {{ $store.state.Config.logMsg }}
        </el-input>
      </el-footer>
    </main>
  </div>


</template>

<script>
import AsideComponent from "./aside/index"
import {CONFIG} from "../store/mutation-types"
import {reduceRepetitionRate} from "../util/ReduceRate";
import AppInfo from "./appInfo";

export default {
  name: 'landing-page',
  components: {AppInfo, AsideComponent},
  data() {
    return {
      before: {
        q: "", //输入的原文
        to: "en" //选择目标语言
      },
      fromList: [{
        value: 'zh',
        label: '源语言-中文'
      }, {
        value: 'en',
        label: '源语言-英文'
      },],
      from: 'zh', //源语言
      result: '', //最终结果
    }
  },
  computed: {
    logMsg: {
      get() {
        return this.$store.state.Config.logMsg
      }
    }
  },
  methods: {
    translate() {
      //保存 vue 
      const that = this

      that.$store.commit(CONFIG.LOADED_CONFIG)
      let appId = that.$store.state.Config.appId
      let password = that.$store.state.Config.password

      let from = that.from
      let q = that.before.q;
      //提示
      that.$message("去重已开始，请不要重复点击，底部信息框将输出整个过程")

      reduceRepetitionRate(appId, password, that.$store.state.Config.level, from, q,
          (data) => {
            console.log(data)
            that.$store.commit(CONFIG.UPDATE_LOG_MSG, JSON.stringify(data))
            that.result = data.trans_result[0].dst
          },
          (data) => {
            that.logMsg = Symbol(data)
            console.log(data)
          })

    }
  }
}
</script>

<style>
.el-header{
  color: #333;
  text-align: center;
  height: max-content;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 115px;
  padding: 20px;
}

.el-card {
  height: 400px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 115px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

</style>